<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<!-- <script type="text/javascript" -->
<!--       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcV0d1ZpxTiIWisoCX6aE8v-TRCSjT51s"> -->
<!-- </script> -->
<!-- import js file -->
<script  src="./resources/backbone/libs/jquery-2.1.0.min.js"></script>
<!-- start dashboard -->
<script  src="./resources/backbone/custom-plugin/dashboard/board-core-v1.js"></script>
<script  src="./resources/backbone/custom-plugin/dashboard/jquery.gridster.min.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/backbone/custom-plugin/dashboard/jquery.gridster.css" />
<!-- end dashboard -->
<script  src="./resources/js/bootstrap.js"></script>
<script  src="./resources/backbone/libs/underscore.js"></script>
<script  src="./resources/backbone/libs/backbone.js"></script>
<script  src="./resources/backbone/libs/require.js"></script>
<script  src="./resources/js/OpenStreetMap 2.13/OpenLayers.js"></script>
<script  src="./resources/js/select2/select2.min.js"></script>
<script  src="./resources/js/uniform/jquery.uniform.min.js"></script>
<script  src="./resources/backbone/utils/page_ready.js"></script>
<script  src="./resources/backbone/utils/util.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>

<!-- import css file -->
<link rel="stylesheet" type="text/css" href="./resources/js/select2/select2.min.css" />
<link rel="stylesheet" type="text/css" href="./resources/js/uniform/css/uniform.default.min.css" />
<link rel="stylesheet" type="text/css" href="./resources/bootstrap-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./resources/bootstrap-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="./resources/css/user.css">
<!-- <link rel="stylesheet" type="text/css" href="./resources/css/select2-bootstrap.css"> -->

<!-- <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  -->
<!-- <script src="http://code.jquery.com/jquery-1.10.2.js"></script> -->
<!-- <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> -->


<script  type="text/template" id="user-template" >

{{ if (typeof User != 'undefined'){ }}
	<div class="col-md-12 col-sm-offset-4 col-sm-5 span12">	

	<div class="row">
  		<div class="col-md-4 center text-primary "><h2>Update Account<h2></div>
	</div>
	
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">User Name :</label>
  		<div class="col-md-3">
			<input id="user-name" class="form-control" placeholder="User Name" value="{{=User.username }}"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Password :</label>
  		<div class="col-md-3">
			<input id="password" class="form-control" placeholder="Password" value="{{=User.password }}"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Frist Name :</label>
  		<div class="col-md-3">
			<input id="first-name" class="form-control" placeholder="Frist Name" value="{{=User.firstName}}"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Last Name :</label>
  		<div class="col-md-3">
			<input id="last-name" class="form-control" placeholder="Last Name" value="{{=User.lastName}}"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Gender :</label>
  		<div class="col-md-3">
			<input id="gender" class="form-control" placeholder="Gender" value="{{=User.gender}}"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Birthday :</label>
  		<div class="col-md-3">
			<input id="birthday" class="form-control" placeholder="Birthday" value="{{=User.birthday}}"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Email :</label>
  		<div class="col-md-3">
			<input id="email" class="form-control" placeholder="Email" value="{{=User.email}}"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Mobile :</label>
  		<div class="col-md-3">
			<input id="mobile" class="form-control" placeholder="Mobile" value="{{=User.mobile}}"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Status :</label>
  		<div class="col-md-3">
			<input id="status" class="form-control" placeholder="Status" value="{{=User.status}}"/>
		</div>
	</div>
	 <div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Role :</label>
  		<div class="col-md-3">

			{{ if (typeof Roles != 'undefined'){}}
			<select multiple="multiple" id="selected-group" class="form-control">
		 		{{ _.each(Roles, function(role) { }}
				
					{{ if (role.group == "Group 1"){}}
						<option value="{{=role.group}}" selected>{{=role.group}}</option>
					{{}else{}}
						<option value="{{=role.group}}">{{=role.group}}</option>
					{{}}}
				{{ }); }}
			</select>
			{{}}}

		</div>
	</div>
	<div class="row form-group">
  		<div class="col-md-4 col-sm-offset-1 col-sm-10">
			<Button id="btn-ok-edit-user" class="btn btn-primary btn-sm">Update</Button>
			<Button id="btn-cancle-edit-user" class="btn btn-info btn-sm">Cancle</Button>
		</div>
	</div>   

</div>
{{}else{}}
	<div class="col-md-12 col-sm-offset-4 col-sm-5">

	<div class="row">
  		<div class="col-md-4 center text-primary"><h2>Create Account<h2></div>
	</div>
	
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">User Name :</label>
  		<div class="col-md-3">
			<input id="user-name" class="form-control" placeholder="User Name"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Password :</label>
  		<div class="col-md-3">
			<input id="password" class="form-control" placeholder="Password"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Frist Name :</label>
  		<div class="col-md-3">
			<input id="first-name" class="form-control" placeholder="Frist Name"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Last Name :</label>
  		<div class="col-md-3">
			<input id="last-name" class="form-control" placeholder="Last Name"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Gender :</label>
  		<div class="col-md-3">
			<input id="gender" class="form-control" placeholder="Gender"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Birthday :</label>
  		<div class="col-md-3">
			<input id="birthday" class="form-control" placeholder="Birthday"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Email :</label>
  		<div class="col-md-3">
			<input id="email" class="form-control" placeholder="Email"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Mobile :</label>
  		<div class="col-md-3">
			<input id="mobile" class="form-control" placeholder="Mobile"/>
		</div>
	</div>
	<div class="row form-group">
  		<label for="inputEmail3" class="col-sm-1 control-label text-primary right">Status :</label>
  		<div class="col-md-3">
			<input id="status" class="form-control" placeholder="Status"/>
		</div>
	</div>
	 
	<div class="row form-group">
  		<div class="col-md-4 col-sm-offset-1 col-sm-10">
			<Button id="btn-create-new" class="btn btn-primary btn-sm">Create New</Button>
			<Button id="btn-view-all-user" class="btn btn-info btn-sm">View All User</Button>
		</div>
	</div>

	</div>


{{}}}
</script>
<script  type="text/template" id="user-manager-template" >
<div class="row">
<div class="col-md-4 col-sm-offset-5 col-sm-10">
	<label class="text-center text-primary"><h2>Account Manager</h2></label>	
</div>
</div>
<table class="table table-striped">
   <thead class="bg-info" align="center">
   		<tr >
			
        </tr>
		<tr>
			<th class="text-center"> <label class="text-info">User Name</label></th>
			<th class="text-center"> <label class="text-info">Password</label></th>
			<th class="text-center"> <label class="text-info">First Name</label></th>
			<th class="text-center"> <label class="text-info">Last Name</label></th>
			<th class="text-center"> <label class="text-info">Gender</label></th>
			<th class="text-center"> <label class="text-info">Email</label></th>
			<th class="text-center"> <label class="text-info">Mobile</label></th>
			<th class="text-center"> <label class="text-info">Birthday</label></th>
			<th class="text-center"> <label class="text-info">Status</label></th>
           	<th class="text-center"> <label class="text-info">Modify</label></th>
        </tr>
   </thead>
   <tbody>
   		
		{{ if (typeof dataArray != 'undefined'){ }}
		 {{ _.each(dataArray, function(user) { }}
   		<tr>
   			<td class="text-center"><label for="inputEmail3" class="col-sm-1 control-label text-primary right">{{=user.username}}</label></td>
			<td class="text-center">{{=user.password}}  </td>
			<td class="text-center">{{=user.firstName}} </td>
			<td class="text-center">{{=user.lastName}}  </td>
			<td class="text-center">{{=user.gender}}    </td>
			<td class="text-center">{{=user.email}}     </td>
			<td class="text-center">{{=user.mobile}}    </td>
			<td class="text-center">{{=user.birthday}}  </td>
			<td class="text-center">{{=user.status}}    </td>
			<td class="text-center">
				<button groupId='{{=user.username}}' name="btn-delete-user" class="btn btn-danger btn-xs">Delete</button>
				<button groupId='{{=user.username}}' name="btn-edit-user" class="btn btn-success btn-xs">Edit</button>
			</td>
   		</tr>
		{{ }); }}
		{{}}}
   </tbody>
</table>

</script>


<!-- your js file define here-->
<script  src="./resources/main_demo.js"></script>


</head>
<body>

<!-- <div id="map-canvas"  style="text-align: center; margin: 0 auto;"></div> -->
<div id="container-content"></div> 

</body>
</html>